<template>
  <div class="container">
    <div class="header-content">
      <h3>新增教师</h3>
    </div>
    <div class="my-content">
      <div class="my-content-item">
        <el-form label-position="right" label-width="100px" :model="formUser">
          <el-form-item label="姓名">
            <el-input v-model="formUser.username"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <!-- <el-input v-model="formUser.gender"></el-input> -->
            <el-radio-group v-model="formUser.gender">
              <el-radio label="1">
                <li class="el-icon-male"></li>
                男
              </el-radio>
              <el-radio label="0"
                ><li class="el-icon-female"></li>
                女
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期">
            <!-- <el-input v-model="formUser.birthday"></el-input> -->
            <el-date-picker
              v-model="formUser.birthday"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model="formUser.idCard"></el-input>
          </el-form-item>
          <el-form-item label="家庭住址">
            <el-input v-model="formUser.address"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="my-content-item2">
        <el-button id="btn" type="primary" @click="addSubmit"
          >新增教师</el-button
        >
      </div>
    </div>
  </div>
</template>
      </div>
    </div>
  </div>
</template>

<script>
import { addTeacherUser } from "@/api";
import { validIdCard } from "@/utils/validate";
export default {
  data() {
    return {
      formUser: {
        universityId: "",
        username: "",
        gender: "1",
        birthday: "",
        idCard: "",
        address: "",
        type: 1, //0：学生，1：教师
      },
    };
  },
  created() {
    this.formUser.universityId = this.$store.state.user.userInfo.universityId;
  },
  methods: {
    async addSubmit() {
      let flag1 = this.formUser.username.trim() !== "";
      let flag2 =
        this.formUser.birthday !== "" && this.formUser.birthday !== null;
      let flag3 = this.formUser.address.trim() !== "";
      let idCardFlag = validIdCard(this.formUser.idCard);
      if (!idCardFlag) {
        this.$message.warning("身份证号格式错误");
        return;
      }
      //发送请求
      if (flag1 && flag2 && flag3) {
        let res = await addTeacherUser(this.formUser);
        if (res.code == 0) {
          this.$message.success("新增教师成功");
          this.$router.push({ name: "manageTeacher" });
        } else {
          this.$message.error(res.msg);
        }
      } else {
        this.$message.warning("姓名、生日、家庭住址不允许为空");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #f0f2f5;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  .header-content {
    width: 70%;
    border-bottom: 1px solid rgb(217, 212, 212);
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    background: rgb(255, 255, 255);
  }
  .my-content {
    padding-bottom: 20px;
    border-radius: 0px 0px 10px 10px;
    background: rgb(255, 255, 255);
    width: 70%;
    .my-content-item {
      padding: 30px;
    }
  }
}
#btn {
  margin-left: 128px;
  margin-top: -30px;
}
</style>